<template>
  <div class="main-chart">
    <div id="harmful-gas" style="height: 480px; width: 100%"></div>
  </div>
</template>

<script>
export default {
  name: "HarmfulGasRelation",
  computed: {
    // X轴数据
    xData: function () {
      let data = []
      for(let i = 0; i < 125; i++) {
        data.push(i+1)
      }
      return data
    },
    coData: function () {
      let data = []
      for(let i = 0; i < 125; i++) {
        data.push(Math.round(Math.random()*(50 - 10) + 10))
      }
      return data
    },
    ch4Data: function () {
      let data = []
      for(let i = 0; i < 125; i++) {
        data.push(Math.round(Math.random()*(5 - 1) + 1))
      }
      return data
    }
  },
  methods: {
    harmfulChart() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('harmful-gas'), 'dark');
      // 监听屏幕变化自动缩放图表
      window.addEventListener('resize', function () {
        myChart.resize()
      })
      // 指定图表的配置项和数据
      let option = {
        title: {
          text: '一氧化碳浓度与甲烷浓度关系图',
          left: 'center',
          align: 'right'
        },
        backgroundColor: 'rgba(0,0,0,0)',
        grid: {
          bottom: 80
        },
        toolbox: {
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            restore: {},
            saveAsImage: {}
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            animation: false,
            label: {
              backgroundColor: '#505765'
            }
          }
        },
        legend: {
          data: ['CO', 'CH₄'],
          left: 10
        },
        dataZoom: [
          {
            show: true,
            realtime: true,
          },
          {
            type: 'inside',
            realtime: true,
          }
        ],
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            axisLine: {onZero: false},
            data: this.xData
          }
        ],
        yAxis: [
          {
            name: 'CO(mg/m³)',
            type: 'value',
            max: 60,
          },
          {
            name: 'CH₄(mg/m³)',
            nameLocation: 'start',
            max: 12,
            type: 'value',
            inverse: true
          }
        ],
        series: [
          {
            name: 'CO',
            type: 'line',
            smooth: true,
            areaStyle: {},
            lineStyle: {
              width: 1
            },
            emphasis: {
              focus: 'series'
            },
            data: this.coData
          },
          {
            name: 'CH₄',
            type: 'line',
            smooth: true,
            yAxisIndex: 1,
            areaStyle: {},
            lineStyle: {
              width: 1
            },
            emphasis: {
              focus: 'series'
            },
            data: this.ch4Data
          }
        ]
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    }
  },

  // mounted是vue中的一个钩子函数，一般在初始化页面完成后，再对dom节点进行相关操作。
  // 实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了
  mounted() {
    this.harmfulChart()
  }
}
</script>

<style scoped>

</style>
